<template>
    <div style="padding-right:5px;">
        <el-form label-width="100px">
            <el-form-item label="输入内容：">
<!--                <el-input v-model="keyword" ></el-input>-->
                <el-input
                        v-model="keyword"
                        placeholder="请输入内容"
                ></el-input>
            </el-form-item>
            <el-form-item label-width="0" style="padding-left: 10px;" align="center">
                <el-button type="primary" @click="() => {this.keyword = ''}">清空</el-button>
                <el-button type="primary" :loading="loading" @click="query">查看</el-button>
            </el-form-item>
            <el-form-item label="结果：" v-if="showResult">
                <span v-html="result"></span>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                keyword: null,
                result: null,
                loading: false,
                showResult: false,
                timeout: null,
            }
        },
        methods: {
            querySearchAsync(queryString, cb) {
                let keywordArr = this.keywordArr;
                let results = (queryString ? keywordArr.filter(kw => kw.includes(queryString)) : keywordArr).map(kw => {return {value: kw}});
                // console.log('queryString:', queryString, 'results:', results)

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1000 * Math.random());
            },
            async query() {
                if (!this.keyword) {
                    this.$message.error('请输入查询关键字')
                    return
                }
                this.loading = true
                this.showResult = false

                this.result = this.keyword

                this.loading = false
                this.showResult = true
            }
        }
    }
</script>

<style scoped>

</style>
